<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<style type="text/css">
		html {
		    font-size:100px;
		    font-size: calc(100vw * 100 / 1080);
		}
		header {
			width: 100%;
			line-height: 1.6rem;
			background: #4ca686;
			text-align: center;
			font-size: .6rem;
			color: #fff;
			position: relative;
		}

		main {
			width: 100%;
			height: calc(100% - 1.6rem);
			overflow: scroll;
			background: #eeeeee;
			padding: .2rem 0;
			box-sizing: border-box;
		}

		.main {
			background: #fff;
			padding: 1px 0;
		}

		.main >div {
			width: 5rem;
			height: 5rem;
			line-height: 6.5rem;
			margin: .6rem auto;
			border-radius: .2rem;
			border:1px solid #8e8e8e;
			text-align: center;
			position: relative;
		}
.main >div img{
	position: absolute;
	width: 100%;height: 100%;
	left: 0;top:0;	
}
.main .picture{
	width:100%;
	display: none;
}
.main  .add{z-index: 8;}
.main #file{
	position: absolute;
	z-index:10;
	left: 0;top:0;
	width: 5rem;
	height: 5rem;opacity: 0;
}
		.main img {
			width: 1.7rem;
			height: auto;
		}

		.main button {
			display: block;
			width: 7.06rem;
			height: 1.41rem;
			line-height: 1.41rem;
			background-color: #fed: 
			background: -webkit-linear-gradient(bottom,#70cef3,#575fac);
    		-webkit-background-clip: text;
    		-webkit-text-fill-color: transparent;
			margin: .4rem auto;
			border-radius: .2rem;
			font-size: .6rem;
			color: #fff;
		}
		#file{
			width:1.7rem;height:1.7rem;
		}
		.main .add{
			width:100%;height:100%;
		}
		form input{
			border:1px solid #000;
		}
	</style>
</head>
<body>
	<header>
		<a href="task_detail.html"></a>
		上传截图
	</header>
	<main>
		<div class="main">
			<div>
				<img src="image/add.png" class="add">
				<img src="" class="picture">
				<input type="file" id="file" name="file" style="border:1px solid #000"  accept="image/jpeg,image/png,application/msword">
			</div>
			<button id="upPic">确认上传</button>
		</div>
	</main>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/ajaxfileupload.js"></script>
	<script type="text/javascript">
		

$("#file").on('change', function( e ){
     var name = $('#file')[0].files;
    //图片大小 console.log(name[0].size)
     var obj=$("#file")[0].files[0];
     var fr=new FileReader();
    fr.onload=function () {
        $(".picture").attr('src',this.result).show();
    	var dataURL = this.result;
    	$(".add").hide();
    };
    fr.readAsDataURL(obj);
 });
$("#upPic").on("click",function(){
	var formData = new FormData();
		formData.append('file', $('#file')[0].files[0]);
		formData.append('requestCode',1);
		formData.append('infoId',2);
		formData.append('taskId',3);
		$.ajax({
	        url: "http://superLeague/ws/task!finishTask.action",
	        type: "POST",
	        data: formData,
	        contentType: false,
	        processData: false,
	        success: function (data) {
	        	console.log(data)
	        	if(data.state==="000"){
	        		if(sessionStoragr.language==="1"){
	        			alert("Success!")
	        		}else{
	        			alert("上传头像成功！")
	        		}
	        		
	        	}
	        }
    	});
})


     $('#file').on('change', function( e ){
         //e.currentTarget.files 是一个数组，如果支持多个文件，则需要遍历
         var name = $('#file')[0].files;
         console.log(name)
         var obj=$("#file")[0].files[0];
         var fr=new FileReader();
        fr.onload=function () {
	        $(".picture").attr('src',this.result);
	    	var dataURL = this.result;
	    };
	    fr.readAsDataURL(obj);
	    $(".add").hide();
	    $(".picture").show()
     });

		
			//点击执行图片预览函数


		
		
	</script>
</body>
</html>